<template>
    <div>
        <mt-header class="m_mint_header" fixed title="身份认证">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div class="img_approve_list">
            <div>
                <el-upload
                        class="avatar-uploader"
                        :action="actions"
                        :headers="headers"
                        :data="{type:2}"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessFrontImg"
                        :before-upload="beforeAvatarUpload"
                        :on-error="errorAvatarUpload"
                >
                    <img v-if="imgForm.frontImg" :src="imgForm.frontImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <div class="img_approve_info">
                    身份证正面照
                </div>
            </div>
            <div>
                <el-upload
                        class="avatar-uploader"
                        :action="actions"
                        :headers="headers"
                        :data="{type:3}"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessBackImg"
                        :before-upload="beforeAvatarUpload"
                        :on-error="errorAvatarUpload"
                >
                    <img v-if="imgForm.backImg" :src="imgForm.backImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <div class="img_approve_info">
                    身份证背面照
                </div>
            </div>
            <div>
                <el-upload
                        class="avatar-uploader"
                        :action="actions"
                        :headers="headers"
                        :data="{type:4}"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessHoldImg"
                        :before-upload="beforeAvatarUpload"
                        :on-error="errorAvatarUpload"
                >
                    <img v-if="imgForm.holdImg" :src="imgForm.holdImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="img_approve_info">
                    手持身份证照
                </div>
            </div>
        </div>
        <div class="img_approve_btn">
            <mt-button size="large" type="primary" @click.native="submitUpload">上传</mt-button>
        </div>
    </div>
</template>

<script>

    import axios from "axios"

    export default {
        name: "Approve",
        components: {},
        data() {
            return {
                imgForm: {
                    frontImg: '',
                    backImg: '',
                    holdImg: '',
                },
                imgFile: {
                    frontImg: '',
                    backImg: '',
                    holdImg: '',
                },
                actions: axios.defaults.baseURL + '/api/upload_img.do',
                headers: {sid: this.$cookies.get('sid')}
            }
        },
        mounted() {
            this.getUserImg();
        },
        methods: {
            getUserImg() {
                let user = this.$cookies.get('user');
                if(user.status == 1){
                    this.imgForm.frontImg = user.frontImg;
                    this.imgForm.backImg = user.backImg;
                    this.imgForm.holdImg = user.holdImg;
                }
            },
            handleAvatarSuccessFrontImg(res, file, fileList) {
                this.imgForm.frontImg = axios.defaults.baseImgURL + res.data;
                this.imgFile.frontImg = res.data;
            },
            handleAvatarSuccessBackImg(res, file, fileList) {
                this.imgForm.backImg = axios.defaults.baseImgURL + res.data;
                this.imgFile.backImg = res.data;
            },
            handleAvatarSuccessHoldImg(res, file, fileList) {
                this.imgForm.holdImg = axios.defaults.baseImgURL + res.data;
                this.imgFile.holdImg = res.data;
            },
            beforeAvatarUpload(file) {
                let isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
                let isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$toast({message: '上传图片只能是 JPG/PNG/JPEG 格式!', duration: 3000});
                    return false;
                }
                if (!isLt2M) {
                    this.$toast({message: '上传图片大小不能超过 2MB!', duration: 3000});
                    return false;
                }
            },
            errorAvatarUpload(err, file, fileList) {
                this.$toast({message: err, duration: 3000});
            },
            submitUpload() {
                console.log(this.imgFile)
                this.requestAxios.requestWeb('post', '/api/save_img.do', this.imgFile, (response) => {
                    this.requestGetUserAgain();
                    this.$toast({message: '身份证已上传完毕，我们会第一时间进行审核，请稍后关注！', duration: 3000});
                })
            },
            requestGetUserAgain() {
                this.requestAxios.requestWeb('post', '/api/get_user_info.do', null, (response) => {
                    let sid = response.data.sid;
                    let user = response.data.user;
                    this.$cookies.set('sid', sid, "7d");
                    this.$cookies.set('user', user, "7d");
                    this.imgForm.frontImg = user.frontImg;
                    this.imgForm.backImg = user.backImg;
                    this.imgForm.holdImg = user.holdImg;
                })
            }
        }
    }
</script>

<style>

    .img_approve_list {
        padding: .3rem;
    }

    .img_approve_list > div {
        display: flex;
        align-items: center;
        margin-bottom: .3rem;
    }

    .img_approve_info {
        padding-left: .3rem;
    }

    .img_approve_btn {
        padding: .3rem;
        margin-top: 1rem;
    }

    .img_approve_btn .mint-button {
        height: .7rem;
        background: linear-gradient(#f0973d, #cd5305);
        color: #fff;
        font-size: .3rem;
        box-shadow: 0 0 10px #dbbaa5;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #ed8413;
    }

    .avatar-uploader-icon {
        font-size: .55rem;
        color: #8c939d;
        width: 3.5rem;
        height: 2.2rem;
        line-height: 2.2rem !important;
        text-align: center;
    }

    .avatar {
        width: 3.5rem;
        height: 2.2rem;
        display: block;
    }


</style>
